<template>
  <h1>El-容器组件</h1>
  <el-container>
<!--    侧边栏-->
    <el-aside width="200px">
      <el-menu>
        <el-menu-item index="1">用户管理</el-menu-item>
        <el-menu-item index="2">车辆管理</el-menu-item>
        <el-menu-item index="3">围栏管理</el-menu-item>
      </el-menu>
    </el-aside>
<!--    右侧主体内容-->
    <el-container>
      <el-header>
        <h1 style="background-color: #0aa1ed;color: white">智慧车辆运营系统-IVOS</h1>
      </el-header>
      <el-main>
        <el-table :data="vehicleArr">
          <el-table-column label="序号" type="index" align="center" width="80"></el-table-column>
          <el-table-column label="品牌" prop="brand" align="center"></el-table-column>
          <el-table-column label="型号" prop="model" align="center"></el-table-column>
          <el-table-column label="车牌号" prop="license" align="center"></el-table-column>
          <el-table-column label="颜色" prop="color" align="center"></el-table-column>
          <el-table-column label="公里数" prop="km" align="center"></el-table-column>
        </el-table>
      </el-main>
    </el-container>
  </el-container>
</template>


<script setup>
import {ref} from "vue";
const vehicleArr = ref([
    {brand:'奔驰',model:'C级',license:'京A00000',color:'白色',km:'10000'},
    {brand:'宝马',model:'X5',license:'京A11111',color:'黑色',km:'20000'},
    {brand:'大众',model:'CC',license:'京A22222',color:'蓝色',km:'30000'},
    {brand:'丰田',model:'汉兰达',license:'京33333',color:'红色',km:'40000'},
    {brand:'现代',model:'酷派',license:'京A44444',color:'黄色',km:'50000'},
    {brand:'比亚迪',model:'宋',license:'京A55555',color:'紫色',km:'60000'},
]);
</script>


<style scoped>

</style>